<template>
  <div id="centreLeft1">
    <el-dialog title="切换区域" :visible.sync="open" width="500px" append-to-body
               @close="cancel">
      <el-form ref="form" label-width="60px" style="height: 120px;">
        <el-form-item label="县区">
          <el-select
            clearable
            v-model="city"
            placeholder="请选择"
            size="small"
            style="width: 100%;"
          >
            <el-option
              v-for="item in this.cityData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <div>
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <!-- <icon name="chart-bar"></icon> -->
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="font-size: 15px;">退耕情况统计图</span>
          <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;"/>
          <!-- <el-tooltip class="item" effect="dark" content="点击切换区域" placement="left-start">
             <svg-icon @click="chooseArea()" class="svg" icon-class="areaNew"
                       style="width: 30px;height: 30px;margin-left: 178px;color: #5f74d4;margin-top: -12px;}"/>
           </el-tooltip>-->
         <!-- <el-tooltip v-show="isShow" class="item" effect="dark" content="点击切换区域" placement="left-start">
            <svg-icon @click="chooseArea()" class="svg" icon-class="areaNew"
                      style="width: 30px;height: 30px;margin-left: 178px;color: #5f74d4;margin-top: -12px;}"/>
          </el-tooltip>-->
        </div>
      </div>
      <div class="d-flex jc-center">
        <div id="centreLeft1Chart" style="width:100%; height: 3.75rem;"></div>
      </div>
      <!-- 4个主要的数据 -->
      <!-- <div class="bottom-data">
         <div class="item-box" v-for="(item,index) in numberData" :key="index">
           <div class="d-flex">
             <span class="coin">￥</span>
             <dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" />
           </div>
           <p class="text" style="text-align: center;">
             {{item.text}}
             <span class="colorYellow">(件)</span>
           </p>
         </div>
       </div>-->
    </div>
  </div>
</template>

<script>
import {getInfo} from "@/api/login";
import {childlistUse} from "@/api/system/dept";

export default {
  name: 'centerLeft1',
  props: {
    tgdata: {
      type: Array,
      default: function () {
        return [];
      }
    },
    fatherMethod: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      city: '',
      isShow: false,
      open: false,
      cityData: [],
      config: {
        lineWidth: 10,
        activeRadius: "70%",
        radius: "65%",
        activeTimeGap: 2000,
        data: [
          /*{
            name: "周口",
            value: 55
          },
          {
            name: "南阳",
            value: 120
          },
          {
            name: "西峡",
            value: 78
          },
          {
            name: "驻马店",
            value: 66
          },
          {
            name: "新乡",
            value: 80
          }*/
        ]
      },
      numberData: [
        /*{
          number: {
            number: [15],
            toFixed: 1,
            content: "{nt}"
          },
          text: "今日构建总量"
        },
        {
          number: {
            number: [1144],
            toFixed: 1,
            content: "{nt}"
          },
          text: "总共完成数量"
        },
        {
          number: {
            number: [361],
            toFixed: 1,
            content: "{nt}"
          },
          text: "正在编译数量"
        },
        {
          number: {
            number: [157],
            toFixed: 1,
            content: "{nt}"
          },
          text: "未通过数量"
        }*/
      ]
    };
  },
  components: {},
  /*watch() {
    tgdata:Array
  },*/
  mounted() {
    this.changeTiming();
  },
  created() {
    getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;
      if (deptCode.length == 4) {//新区
        childlistUse(deptCode).then(response => {
          this.cityData = response.data;
        });
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });
  },
  methods: {
    chooseArea() {
      this.open = true;
    },
    submit() {
      this.fatherMethod(this.city);
      this.open = false;
    },
    cancel() {
      this.open = false;
    },
    changeTiming() {
      this.draw();

      /* setInterval(() => {
         this.changeNumber();
         this.draw();
       }, 3000);*/
    },
    changeNumber() {
      this.numberData.forEach((item, index) => {
        item.number.number[0] += ++index;
        item.number = {...item.number};
      });
    },
    draw() {
      this.$watch('tgdata', res => {
        this.tgdata = res;
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
        let arr = [];
        let len = this.tgdata.length;
        let i = 0;
        this.tgdata.forEach(item => {
          i++;
          arr.push({value: item.cbfzs, name: item.deptName});
          if (len == i) {
            this.chart.setOption({
              color: [
                "#37a2da",
                "#fb7293",
                "#32c5e9",
                "#9fe6b8",
                "#ffdb5c",
                "#ff9f7f",
                "#e7bcf3",
                "#8378ea"
              ],
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              toolbox: {
                show: true
              },
              calculable: true,
              /*legend: {
                orient: "horizontal",
                icon: "circle",
                bottom: 0,
                x: "center",
                // data: ["国有土地", "集体土地"],
                textStyle: {
                  color: "#fff"
                }
              },*/
              series: [
                {
                  name: "退耕情况统计图",
                  type: "pie",
                  // radius: [10, 60],
                  roseType: "area",
                  center: ["50%", "50%"],
                  data: arr,/*[
                  arr
                  /!*{value: 10, name: "A镇"},
                  {value: 30, name: "B镇"},
                  {value: 50, name: "C镇"},
                  {value: 10, name: "D镇"},*!/
                ]*/
                  itemStyle: {
                    normal: {
                      labelLine: {
                        length: 15,
                        length2: 15,
                        show: true,
                        color: '#00ffff'
                      }
                    }
                  },
                }
              ]
            });
          }
        });

      });
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
      let arr = [];
      let len = this.tgdata.length;
      let i = 0;
      this.tgdata.forEach(item => {
        i++;
        arr.push({value: item.cbfzs, name: item.deptName});
        if (len == i) {
          this.chart.setOption({
            color: [
              "#37a2da",
              "#fb7293",
              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#e7bcf3",
              "#8378ea"
            ],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
              show: true
            },
            calculable: true,
            /*legend: {
              orient: "horizontal",
              icon: "circle",
              bottom: 0,
              x: "center",
              // data: ["国有土地", "集体土地"],
              textStyle: {
                color: "#fff"
              }
            },*/
            series: [
              {
                name: "退耕情况统计图",
                type: "pie",
                // radius: [10, 60],
                roseType: "area",
                center: ["50%", "50%"],
                data: arr,/*[
                  arr
                  /!*{value: 10, name: "A镇"},
                  {value: 30, name: "B镇"},
                  {value: 50, name: "C镇"},
                  {value: 10, name: "D镇"},*!/
                ]*/
                itemStyle: {
                  normal: {
                    labelLine: {
                      length: 15,
                      length2: 15,
                      show: true,
                      color: '#00ffff'
                    }
                  }
                },
              }
            ]
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
#centreLeft1 {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .bg-color-black {
    height: 4.8125rem;
    border-radius: 0.125rem;
  }

  .text {
    color: #c3cbde;
  }

  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;

    .active-ring-name {
      padding-top: 0.125rem;
    }
  }

  .bottom-data {
    .item-box {
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      // 金币
      .coin {
        position: absolute;
        left: 0.1rem;
        top: 0.2125rem;
        font-size: 0.25rem;
        color: #ffc107;
      }

      .colorYellow {
        color: yellowgreen;
      }
    }
  }
}
</style>
